import React, { useState } from 'react'

export default function App() {
  // Hook 是有顺序的，React 内部是根据 Hook 书写顺序来识别是哪一个状态和修改状态的方法
  const [count, setCount] = useState(0) // 1
  const [arr] = useState(['a', 'b', 'c']) // 2
  const [age, setAge] = useState(18) // 3
  const handleClick = () => {
    setCount(count + 1)
  }
  const handleAge = () => {
    setAge(age + 1)
  }
  return (
    <div>
      <h3>计数器：{count}</h3>
      <h3>年龄：{age}</h3>
      <ul>
        {arr.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={handleClick}>+1</button>
      <button onClick={handleAge}>+1</button>
    </div>
  )
}
